<template>
  <fieldset>
    <legend>插槽</legend>
    <input type="text" />
    <button>点击</button>
    <div class="header">
      <!-- 可以在slot标签中间编写占位的内容，组件如果没有传递内容，就使用默认占位内容，传递内容的话就用传递的内容 -->
      <slot name="header">
        <h2>默认占位的header</h2>
      </slot>
    </div>
    <div class="body">
      <slot name="main" :t="fruit"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
    <!-- 没名字的默认分发 -->
    <!-- 插槽作用域 -->
    <slot :o="obj"></slot>
  </fieldset>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "lili",
        nickname: "66",
        address: "魔仙堡",
      },
      fruit: "菠萝🍍",
    };
  },
};
</script>
